<template>
    <div class="session-wrap">
        <el-form inline size="medium" v-if="datas">
            <el-form-item label="大标题：">
                <el-input v-model="form.title" placeholder="大标题"></el-input>
            </el-form-item>
            <el-form-item label="小标题：">
                <el-input v-model="form.subTitle" placeholder="小标题"></el-input>
            </el-form-item>
            <el-form-item label="描述：">
                <el-input v-model="form.desc" placeholder="描述"></el-input>
            </el-form-item>
        </el-form>
        <div class="t_l mt20">
            <el-upload
                    :action="imgUpload"
                    :file-list="iconList"
                    list-type="picture"
                    :limit="3"
                    :on-preview="handlePictureCardPreview"
                    :on-success="uploadIconSuccess"
                    :on-remove="handleRemove"
            >
                <el-button type="success">上传icon图片</el-button>
            </el-upload>
        </div>
        <div class="t_l mt20">
            <el-upload
                    :action="imgUpload"
                    :file-list="fileList"
                    list-type="picture"
                    :on-preview="handlePictureCardPreview"
                    :on-success="uploadSuccess"
                    :on-remove="handleRemove"
            >
                <!-- <i class="el-icon-plus"></i> -->
                <el-button type="success">点击上传</el-button>
                <!-- <el-input  size="mini" style="width:600px;"> -->
            </el-upload>
            <el-form>
                <el-form-item
                        :label="'第'+ (Number(index)+1) +'个图片的链接：'"
                        v-for="(item,index) in fileList"
                        :key="index"
                        class="mt20"
                >
                    <el-input v-model="item.backUrl" placeholder="请输入链接地址" width="60%"></el-input>
                    <!-- <el-button type="danger"  @click="deleteImg(index)">删除</el-button> -->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close()" size="mini">取消</el-button>
                <el-button type="primary" @click="saveSinglEMapConf" size="mini">确定</el-button>
            </div>
        </div>
        <!-- </el-dialog> -->
    </div>
</template>
<script>
    // 引入资源
    export default {
        name: "session",
        props: {
            moduleId: {
                type: String
            },
            fileList: {
                type: Array,
                default: () => {
                    return [];
                }
            },
            iconList: {
                type: Array,
                default: () => {
                    return [];
                }
            },
            MoreMapDialogVisible: {
                type: Boolean
            },
            datas: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        },
        data() {
            return {
                form: {subTitle: "", title: "", desc: ""},
                title: "",
                subTitle: "",
                desc: "", // 是否显示单图上传
                imgUpload: this.utils.imgUploadUrl, // 上传图片地址
                dialogVisible: false // 是否显示查看图片
            };
        },

        methods: {
            uploadIconSuccess(file) {
                this.iconList.push({url: file.data.imgUrl, backUrl: ""});
            },
            deleteImg(index) {
                this.fileList.splice(index, 1);
            },
            // 上传图片保存信息
            saveSinglEMapConf() {
                let imgUlrList = this.fileList;
                imgUlrList.forEach(item => {
                    item.imgUrl = item.url;
                });
                let params = {};
                params.templateDataType = 0;
                params.moduleId = this.moduleId;
                params.variablesObject = {
                    imgUlrList: imgUlrList,
                    title: this.form.title,
                    subTitle: this.form.subTitle,
                    desc: this.form.desc,
                    icon: this.iconList
                };
                params.platform = 1;
                this.utils.request.cmsPageModuleAddModuleData(params, res => {
                    if (res.code === "0000") {
                        // this.MoreMapDialogVisible=false
                        this.$emit("MoreMapDialogVisibleFun");
                        this.$emit("getIndex");
                        this.$message({message: "保存成功", type: "success"});
                    } else {
                        this.$message({message: res.msg, type: "error"});
                    }
                });
            },

            // 图片回显  handlePictureCardPreview
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.imageUrl;
                this.dialogVisible = true;
            },

            // 删除已上传的图片  handleRemove
            handleRemove(file, fileList) {
                console.log(fileList);
                if (fileList && fileList.length > 0) {
                    this.fileList = fileList;
                }
            },

            // 上传成功后回调
            uploadSuccess(file) {
                this.fileList.push({url: file.data.imgUrl, backUrl: ""});
            },

            close() {
                // this.MoreMapDialogVisible=false
              this.$router.push("/Pages/Configuration/Cms/CmsPages");
            }
        },

        mounted() {
            // 格式化list格式
            if (this.fileList && this.fileList.length > 0) {
                this.fileList.forEach(item => {
                    // imgUrlList.push({url:item.imgUrl})
                    item.url = item.imgUrl;
                });
            }
            this.form = this.datas;
        }
    };
</script>
<style lang="scss" scoped>
    .el-button {
        margin-bottom: 5px;
    }

    .session-wrap {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        background-color: #fff;
        margin: 20px 0 10px;

        .session-image-wrap {
            width: 100%;
            height: 125px;
            margin-bottom: 10px;

            .session-image {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }

    .form {
        /deep/ .el-form-item,
        /deep/ .el-form-item__content,
        /deep/ .el-input__inner {
            width: 100%;
        }
    }

    .mt20 {
        margin: 20px 0;
    }

    .dialog-footer {
        margin-top: 20px;
    }

    .t_l {
        text-align: left;
    }
</style>
